<!--
  Generated template for the AnswerPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar color="gm-primary">
    <ion-title>咨询详情</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-refresher (ionRefresh)="onRefresh($event)">
    <ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="下拉开始刷新"
        refreshingSpinner="circles"
        refreshingText="数据正在载入">
    </ion-refresher-content>
  </ion-refresher>

  <div class="message-wrapper">
    <img [src]="getAvatarImage(question.user_gender)" class="profile-pic right" (click)="onViewProfile(question)"/>

    <div class="chat-bubble right slide-right">
      <div class="message" [innerHTML]="question.content" autolinker></div>

      <div class="message-detail">
        <span class="bold">{{question.user_phone}}</span>
        <span class="right-date">&emsp;{{question.updated_at|date:'MM月dd日 HH点mm分'}}</span>
      </div>
    </div>

    <div class="cf"></div>
  </div>

  <div *ngFor="let message of message_list" class="message-wrapper">
    <img (click)="onViewProfile(message)" [src]="getAvatarImage(message.qa_gender, message.type)" class="profile-pic"
         [ngClass]="getAvatarStyle(message.type)"/>

    <div class="chat-bubble" [ngClass]="getContentStyle(message.type)">
      <div class="message" [innerHTML]="message.content" autolinker></div>

      <div class="message-detail">
        <span class="bold">{{message.type > 1 ? message.qa_name : message.qa_phone}}</span>
        <span [ngClass]="getDateStyle(message.type)">&emsp;{{message.updated_at|date:'MM月dd日 HH点mm分'}}</span>
      </div>
    </div>

    <div class="cf"></div>
  </div>
</ion-content>

<ion-footer>
  <ion-item no-lines>
    <ion-textarea name="message" [(ngModel)]="reply_data.content" placeholder="{{reply_label}}"></ion-textarea>
    <button ion-button clear (click)="onReplyMessage()" item-end>
      <ion-icon class="footer-btn" name="send"></ion-icon>
    </button>
  </ion-item>
</ion-footer>
